<template>
  <div class="fenleilist">
    <van-nav-bar title="分类列表" left-text="返回" left-arrow />
    <van-tabs v-model="active" @click="Onclick">
      <van-tab
        :title="item.catename"
        v-for="item in fl"
        :key="item.id"
        :name="item.id"
      >
      </van-tab>
    </van-tabs>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ArticleItem
        v-for="item in fenlei"
        :key="item.id"
        :item="item"
      ></ArticleItem>
    </van-list>
  </div>
</template>

<script>
import { FenleiListAPI, fenleiAPI } from '@/api/article'
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  components: { ArticleItem },
  name: 'fenleilist',
  data () {
    return {
      fl: [],
      sort_num: this.sort_num++,
      fenlei: [],
      page: 1,
      limit: 10,
      loading: false,
      finished: false
    }
  },
  methods: {
    async onLoad () {
      const { data: res } = await FenleiListAPI()
      // this.fenlei = res.data.list.data
      console.log(res)
      this.loading = false
      this.fenlei.push(...res.data.list.data)
      this.current++
    },
    Onclick (name, title) {
      // console.log(name, title)
      this.$router.push('/fenleilist?id=' + name)
    }
  },
  async created () {
    const { data: res } = await fenleiAPI()
    this.fl = res.data.allCate
    // console.log(res.data.allCate)
  }
}
</script>

<style></style>
